import React, { Component } from 'react'
import Header from '../common/Header';
import {connect} from 'react-redux';
import { cityId_action, mycity_action } from '../../store/store';
class City extends Component {
    constructor(){
        super();
        this.state={
            
        }
    }
    
    render() {
        return (
            <div className='city'>
                {/* 头部组件 */}
                <Header left={<span onClick={()=>{this.props.history.push('/my')}}>&lt;</span>} title="我的收货地址" right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                {/* 添加地址 */}
                <div className="btn">
                    <button onClick={()=>{this.props.history.push('/addcity')}}>点击添加收货地址</button>
                </div>
                {/* 渲染地址 */}
                <div className="cityList">
                {this.props.list.length>0?
                this.props.list.map((item,index)=>{
                    return (
                        <div className={`black ${this.props.lis.id===item.id?'active':''}`}  key={item.id} onClick={()=>{this.props.adds(item.id)}}>
                            <div className="left">
                                <p>{item.city}</p>
                                <span>{item.username}</span> <span>{item.call}</span>
                            </div>
                            <div className="right">
                                <span className='iconfont icon-bianji' onClick={()=>{this.props.history.push('/case');this.props.add(item.id)}}></span>
                            </div>
                        </div>
                    )
                }):
                <div>还没有添加地址！！！</div>}
                </div>
                
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            list:state.cityList,
            lis:state.myList
        }
    },
    (dispatch)=>{
        return {
            add:(id)=>{
                dispatch(cityId_action(id))
            },
            adds:(id)=>{
                dispatch(mycity_action(id))
            }
        }
    }
)(City)
